<!DOCTYPE html>
<html>
  <body>
    <button class="btn">button</button>
    <input id="input-text" type="text" />
    <input id="input-radio" type="radio" />
    <input id="input-checkbox" type="checkbox" />
    <select id="select">
      <option value="0">0</option>
      <option value="1">1</option>
    </select>
    <select multiple id="multiple">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <button class="interactive">changing button</button>
    <button class="interactive">another changing button</button>
    <button class="interactive">3rd changing button</button>
    <button class="both">both</button>
    <button class="both">another both</button>
    <button class="mdown">click adds class removed by mousedown</button>
    <button class="mdown">mdown</button>
    <input id="input-placeholder" type="text" value="placeholder" />
    <button id="assertions-1" class="container container-wide" value="submit1" type="button" data-channel="a1" data-target="none">assertions button</button>
    <button id="long-attr" style="color: red; border: 1px solid blue; border-radius: 100px; z-index: 1; background-color: green;">long attr</button>
    <button class="assertion-submit">submit</button>
    <span id="success-message" style="display: none">action success!</span>
    <script>
      const btn1 = document.getElementsByClassName('interactive')[0]
      const btn2 = document.getElementsByClassName('interactive')[1]
      const btn3 = document.getElementsByClassName('interactive')[2]

      btn1.addEventListener('mouseover', function() {
        btn1.classList.add('mouseover')
      })

      btn2.addEventListener('mouseenter', function() {
        btn2.classList.add('mouseenter')
      })

      btn3.addEventListener('mousedown', function() {
        btn3.classList.add('mousedown')
      })

      const both = document.getElementsByClassName('both')[0]

      both.addEventListener('mouseover', function() {
        both.classList.add('mouseover')
      })

      both.addEventListener('mousedown', function() {
        both.classList.add('mousedown')
      })

      const mdown = document.getElementsByClassName('mdown')[0]

      mdown.addEventListener('mousedown', function() {
        mdown.classList.remove('clicked')
      })

      mdown.addEventListener('click', function() {
        mdown.classList.add('clicked')
      })

      const assertionSubmit = document.getElementsByClassName('assertion-submit')[0]

      assertionSubmit.addEventListener('click', function() {
        document.getElementById('success-message').style.display = 'block'
      })
    </script>
  </body>
</html>
